<template>
    <el-container class="index">
      <el-header>
        <div class="logo">
          <img src="../assets/logo.png" alt="">
        </div>
        <div class="title">
          <h1>电商后台管理系统</h1>
        </div>
        <div class="logout">
          欢迎光临~ <a  @click='logout'  href="javascript:;">退出</a>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 默认让哪个导航高亮, 高亮将来是要通过js的计算属性来实现的 -->
          <el-menu
            :default-active="defaultActive"
            router
            unique-opened
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu :index="menu.path"  v-for='menu in menuList'  :key='menu.id'>
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{menu.authName}}</span>
              </template>
                <el-menu-item :index="item.path" v-for='item in menu.children' :key='item.id'>
                <i class="el-icon-menu"></i>
                <span slot="title">{{item.authName}}</span>
                </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  data () {
    return {
      menuList: []
    }
  },
  async created () {
    const { meta, data } = await this.$axios.get('menus')
    if (meta.status === 200) {
      console.log(data)
      this.menuList = data
    } else {
      this.$message.error(meta.msg)
    }
  },
  computed: {
    defaultActive () {
      return this.$route.path.slice(1)
    }
  },
  methods: {
    logout () {
      this.$confirm('亲, 你确认要退出本系统么?', '温馨提示', {
        type: 'waring'
      }).then(() => {
        // token的退出, 就是将token令牌销毁
        localStorage.removeItem('token')
        this.$message.success('退出成功')
        // 跳转路由到登录
        this.$router.push('/login')
      }).catch(e => {
        console.log(e)
      })
    }
  }

}
</script>
// scoped 解决不同组件之间的样式影响
<style lang='scss' scoped>
.index{
    height: 100%;
    .el-header{
      background-color: #d8d8d8;
      display: flex;
      .logo{
        width: 180px;
        img{
          height: 40px;
          margin: 10px;
        }
      }
      .title{
        flex: 1;
        h1{
          color: #545c64;
          height: 60px;
          line-height: 60px;
          text-align: center;
        }
      }
      .logout{
        width: 180px;
        height: 60px;
        line-height: 60px;
        text-align: right;
        font: bold;
        a{
          color: orange;
        }
      }
    }
    .el-aside{
      background-color: #545c64;
      .el-menu{
        border-right: none;
      }
    }
    .el-main{
      background: #ecf0f1;
    }
}
</style>
